@use "./var.scss" as *;
@use "sass:map";

$btn-prefix-cls: "#{$prefix}-btn";

// ======================================
// 1. 所有类型按钮的配置 Map
// key = type, value = 默认色 & 各 status 色
// ======================================
$btn-variants: (
  primary: (
    default: $var-primary,
    hover: $var-primary-5,
    active: $var-primary-7,
    disabled: $var-primary-3
  ),
  success: (
    default: $var-success,
    hover: $var-success-5,
    active: $var-success-7,
    disabled: $var-success-3
  ),
  warning: (
    default: $var-warning,
    hover: $var-warning-5,
    active: $var-warning-7,
    disabled: $var-warning-3
  ),
  danger: (
    default: $var-danger,
    hover: $var-danger-5,
    active: $var-danger-7,
    disabled: $var-danger-3
  ),
  secondary: (
    default: $var-color-fill-2,
    hover: $var-color-fill-3,
    active: $var-color-fill-4,
    disabled: $var-color-fill-1
  ),
  dashed: (
    default: $var-color-fill-2,
    hover: $var-color-fill-3,
    active: $var-color-fill-4,
    disabled: $var-color-fill-1,
    border-style: dashed
  ),
  outline: (
    default: $var-white,
    hover: $var-primary,
    active: $var-primary,
    disabled: $var-primary-3,
    border-color: $var-primary
  ),
  text: (
    default: $var-transparent,
    hover: $var-color-fill-2,
    active: $var-color-fill-3,
    disabled: $var-color-fill-1,
    border-color: $var-transparent
  )
);

// ======================================
// 2. 按钮生成器 Mixin
// ======================================
@mixin btn-variant($name, $conf) {
  .#{$btn-prefix-cls}-#{$name} {

    background-color: map.get($conf, default);
    color: $var-color-text-5;
    border: 1px #{map.get($conf, border-style, solid)} map.get($conf, border-color, map.get($conf, default));


    &:hover {
      background-color: map.get($conf, hover);
      border-color: map.get($conf, hover);
    }
    &:active {
      background-color: map.get($conf, active);
      border-color: map.get($conf, active);
    }
    &:disabled {
      background-color: map.get($conf, disabled);
      border-color: map.get($conf, disabled);
      cursor: not-allowed;
    }
  }
}

// ======================================
// 3. 自动输出所有按钮类型
// ======================================
@each $name, $conf in $btn-variants {
  @debug "Generating button type: #{$name}";
  @include btn-variant($name, $conf);
}

// ======================================
// 4. 尺寸依旧保持 map + 循环（很好👍）
// ======================================
$var-size-map: (
  mini: (
    padding: 0 12px,
    font-size: $font-size-12,
    height: 24px,
  ),
  small: (
    padding: 0 16px,
    font-size: $font-size-14,
    height: 28px,
  ),
  medium: (
    padding: 0 16px,
    font-size: $font-size-14,
    height: 32px,
  ),
  large: (
    padding: 0 20px,
    font-size: $font-size-14,
    height: 36px,
  ),
);

@each $size, $props in $var-size-map {
  .#{$btn-prefix-cls}-size-#{$size} {
    padding: map.get($props, padding);
    font-size: map.get($props, font-size);
    border-radius: $border-radius-small;
    height: map.get($props, height);
  }
}